<template>
  <div>
    <a-button @click="queryAction" style="margin-bottom: 12px;"><a-icon type="sync"/>刷新</a-button>
    <a-spin :spinning="loading">
      <a-descriptions bordered :column="3">
        <a-descriptions-item label="ID">
          {{form.id}}
        </a-descriptions-item>
        <a-descriptions-item label="终端名称">
          {{form.name}}
        </a-descriptions-item>
        <a-descriptions-item label="终端编号">
          {{form.code}}
        </a-descriptions-item>
        <a-descriptions-item label="组织机构">
          {{form.organizationName}}
        </a-descriptions-item>
        <a-descriptions-item label="所属分组">
          {{form.groupName}}
        </a-descriptions-item>
        <a-descriptions-item label="所属城市">
          {{form.cityName}}
        </a-descriptions-item>
        <a-descriptions-item label="终端类型">
          <!-- {{form.type | dictFilter(dict.type)}} -->
        </a-descriptions-item>
        <a-descriptions-item label="硬件编号">
          {{form.hardwareCode}}
        </a-descriptions-item>
        <a-descriptions-item label="分辨率">
          {{form.resolution}}
        </a-descriptions-item>
        <a-descriptions-item label="软件版本">
          {{form.softwareVersion}}
        </a-descriptions-item>
        <a-descriptions-item label="IP地址(公网)">
          {{form.internetIp}}
        </a-descriptions-item>
        <a-descriptions-item label="IP地址(内网)">
          {{form.intranetIp}}
        </a-descriptions-item>
       <a-descriptions-item label="服务器地址">
          {{form.serverAddress}}
        </a-descriptions-item>
        <a-descriptions-item label="操作系统">
           {{form.os}}
         </a-descriptions-item>
        <a-descriptions-item label="可用存储">
          {{formatSize(form.diskSpace)}}
        </a-descriptions-item>
        <a-descriptions-item label="最后心跳时间">
          {{form.heartBeatTime}}
        </a-descriptions-item>
        <a-descriptions-item label="终端状态">
          <a-tag :color="getStatusColor(form.status)" style="margin-right: 0 !important;">{{form.status | dictFilter(dict.status)}}</a-tag>
        </a-descriptions-item>
      </a-descriptions>
    </a-spin>
  </div>
</template>

<script>
import {terminalService} from '@/services'
import {formatSize} from '@/utils/util'

export default {
  name: 'TerminalInfo',
  props: {
    recordId: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      form: {
        id: undefined,
        name: undefined,
        organizationId: undefined,
        groupId: undefined,
        code: undefined,
        hardwareCode: undefined,
        type: undefined,
        resolution: undefined,
        softwareVersion: undefined,
        internetIp: undefined,
        os: undefined,
        diskSpace: undefined,
        status: undefined
      },
      dict: {
        // type: [],
        status: []
      }
    }
  },
  filters: {
    dictFilter: (val, dictList) => {
      const dict = dictList.find(item => item.value == val)
      return dict ? dict.title : '未知'
    }
  },
  computed: {
    getStatusColor() {
      return function(val) {
        switch (val) {
          case '0':
            return '#92aac3'
          case '1':
            return '#f35656'
          case '2':
            return '#70d258'
          case '3':
            return '#b796d3'
          default:
            return '#636363'
        }
      }
    }
  },
  methods: {
    formatSize,
    queryAction() {
      this.loading = true
      const params = {
        id: this.recordId
      }
      terminalService.query(JSON.stringify(params)).then(res => {
        const result = res.data
        if (result.code === 200) {
          this.form = result.data
        }
      }).finally(this.loading = false)
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.getDict(JSON.stringify({code: 'TERMINAL_TYPE'})).then(res => this.dict.type = res.data.data)
      this.getDict(JSON.stringify({code: 'TERMINAL_STATUS'})).then(res => this.dict.status = res.data.data)
      this.queryAction()
    })
  }
}
</script>
<style scoped lang="less">
</style>